<template>
  <view class="code_wrapper">
    <img src="../../static/img/code.png" class="bg"/>
    <div id="saveContent" class="content pd_t_50 pd_b_45">
      <div class="row cont-center pd_l_30 top-wrapper">
        <div v-if="!avatar" class="head iconfont icon-touxiang col-fff text-cent font-40"></div>
        <div v-if="avatar" class="head col-fff text-cent font-40"><img :src="avatar" /></div>
        <div class="font-28 col-333 pd_l_10">{{nickName}} {{phonenumber.substr(0, 4)}}****{{phonenumber.substr(phonenumber.length-4, phonenumber.length)}}</div>
      </div>
      <div class="code row cont-center b_wrapper">
        <!-- <div class="code-img"><img src="../../icon/icon150x150.png" /></div> -->
        <div id="qrcode" class="code-img">
          <canvas class="canvas-code" canvas-id="myQrcode" style="background:#fff;width: 100%;height: 100%;"/>
        </div>
        <div class="pd_l_10" style="width: 330upx">
          <div class="font-28 font-b col-333 pd_b_30">指北针新高考规划</div>
          <div class="font-26 col-999">专业的第三方学生综合测评系统</div>
        </div>
      </div>
    </div>
    <view class="btn_wrapper row">
      <view class="item row" @click="save" style="align-items: center;flex-direction: column">
        <view class="item_btn">
          <u-icon name="weixin-fill" size="44" color="#FFA600"></u-icon>
        </view>
        <viw class="font-28 col-fff">微信好友</viw>
      </view>
      <view class="item row" @click="save" style="align-items: center;flex-direction: column">
        <view class="item_btn">
          <u-icon name="moments" size="44" color="#FFA600"></u-icon>
        </view>
        <viw class="font-28 col-fff">微信朋友圈</viw>
      </view>
      <view class="item row" @click="save" style="align-items: center;flex-direction: column">
        <view class="item_btn">
          <u-icon name="qq-circle-fill" size="44" color="#FFA600"></u-icon>
        </view>
        <viw class="font-28 col-fff">QQ好友</viw>
      </view>
      <view class="item row" @click="save" style="align-items: center;flex-direction: column">
        <view class="item_btn">
          <u-icon name="photo" size="44" color="#FFA600"></u-icon>
        </view>
        <viw class="font-28 col-fff">保存图片</viw>
      </view>
    </view>
    <canvas style="width: 375px;height: 611px;position:fixed;top:80px;left:-9999px" canvas-id="mycanvas"/>
  </view>
</template>

<script>

  import {request} from "../../util/api";
  import QRCode from '../../util/qcode'
  export default {
    data() {
      return {
        wxPlus: {},
				nickName: "",
				phonenumber: "",
				userId: "",
				avatar: '',
        codeImg: '',
        imagePath: '',
        avatar_path: ''
      }
    },
    onShow() {
      this.getCurrentUser()
    },
    methods: {
      getCurrentUser() {
        var that_ = this;
        request({
          url: '/app/userCenter/getLoginUserInfo'
        }).then(ret => {
          that_.nickName = ret.data.nickName;
          that_.phonenumber = ret.data.phonenumber;
          that_.userId = ret.data.userId;
          if (ret.data.avatar) {
            that_.avatar = ret.data.avatar;
          }
          new QRCode('myQrcode', {
            text: 'https://www.zbzedu.com/login.html?userId=' + that_.userId,
            width: uni.upx2px(180),
            height: uni.upx2px(180),
            padding: 0, // 生成二维码四周自动留边宽度，不传入默认为0
            correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度
            callback: (res) => {
              that_.codeImg = res.path
              if (ret.data.avatar) {
                uni.getImageInfo({
                  src: ret.data.avatar,    //请求的网络图片路径
                  success: function (response) {
                    that_.avatar_path = response.path
                    that_.makePic()
                  },
                  fail() {
                    that_.makePic()
                  }
                })
              } else {
                that_.makePic()
              }
            }
          })
        })
      },

      makePic() {
        var that = this;
        var percent = 1
        var context = wx.createCanvasContext('mycanvas');
        context.fillRect(0, 0, 375 / percent, 611 / percent)
        var path = "../../static/img/code.png";

        context.drawImage(path, 0, 0, 375 / percent, 611 / percent);

        let bg_x = 20 / percent
        let bg_y = 20 / percent
        let bg_w = 40 / percent
        let bg_h = 40 / percent
        let bg_r = 20 / percent
        context.save()
        context.beginPath()
        context.arc(bg_x + bg_r, bg_y + bg_r, bg_r, Math.PI, Math.PI*1.5)
        context.arc(bg_x + bg_w - bg_r, bg_y + bg_r, bg_r, Math.PI * 1.5, Math.PI * 2)
        context.arc(bg_x + bg_w - bg_r, bg_y + bg_h - bg_r, bg_r, 0, Math.PI * 0.5)
        context.arc(bg_x + bg_r, bg_y + bg_h - bg_r, bg_r, Math.PI * 0.5, Math.PI)
        context.clip()
        var path1 = that.avatar_path;
        console.log(path1)
        context.drawImage(path1, bg_x, bg_y, bg_w, bg_h);
        context.restore()

        // 画昵称
        var phonenumber = that.phonenumber.substr(0, 4) + '****' + that.phonenumber.substr(that.phonenumber.length-4, that.phonenumber.length)
        context.setFontSize(16 / percent);
        context.setFillStyle('#333');
        context.setTextAlign('left');
        context.fillText(that.nickName + ' ' + phonenumber, 70 / percent, 45 / percent);
        context.stroke();
        // 画二维码
        let code_path = that.codeImg
        context.drawImage(code_path, 18 / percent, 465 / percent, 130/percent, 130 / percent)

        context.setFontSize(20 / percent);
        context.setFillStyle('#000');
        context.setTextAlign('left');
        context.fillText('指北针新高考规划', 160 / percent, 500 / percent);
        context.setFontSize(16 / percent);
        context.setFillStyle('#666');
        context.fillText('专业的第三方学生综合测', 160 / percent, 550 / percent);
        context.fillText('评系统', 160 / percent, 580 / percent);
        context.draw();

        setTimeout(function () {
          uni.canvasToTempFilePath({
            canvasId: 'mycanvas',
            success: function (res) {
              that.imagePath = res.tempFilePath;
            }
          });
        }, 200);
      },

      save() {
        console.log('保存执行')
        uni.saveImageToPhotosAlbum({
          filePath: this.imagePath,
          success(res) {
            wx.showModal({
              content: '图片已保存到相册，赶紧去分享给好友吧~',
              showCancel: false,
              confirmText: '好的',
              confirmColor: '#FFA600',
              success: function (res) {

              }
            })
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.code_wrapper {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  position: relative;
  background: linear-gradient(90deg, #FFA600 0%, #FE642C 98%);
  .bg {
    width: 80%;
    height: 70%;
    position: absolute;
    top: 10%;
    left: 10%;
    z-index: 0;
  }
  .btn_wrapper {
    justify-content: space-around;
    position: absolute;
    bottom: 5%;
    left: 5%;
    width: 90%;
  }
  .item_btn {
    background: #fff;
    width: 70upx;
    height: 70upx;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.head {
    width: 54upx;
    height: 54upx;
    line-height: 54upx;
    border-radius: 50%;
    background-color: #A3A1A4;
  }

  .code {
    position: absolute;
    bottom: 35upx;
    left: 30upx;
    right: 20upx;
  }

  .code-img {
    width: 180upx;
    height: 180upx;
    background: red;
  }

  .code-img img {
    width: 100%;
    height: 100%;
  }

  .up-icon-style {
    width: 90upx;
    height: 90upx;
    line-height: 90upx;
    border-radius: 50%;
  }

  .head img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
  .top-wrapper {
    position: absolute;
    top: 13%;
    left: 12%;
  }
  .b_wrapper {
    position: absolute;
    bottom: 22%;
    left: 13%;
  }
</style>